<!--
   Created by IntelliJ IDEA.
   @File vueIndex.html
   @Auth liuxing
   @Date 2021/8/25,15:13
   @Email liuxing997@foxmail.com
-->
<!-- page content -->
<div id="myVue" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="titlfavicon.icoe_left">
                <h3>
                    This VueIndex Page
                </h3>
                <div class="clearfix"></div>
                <p>====================</p>
                <h3>获取数据</h3>
                <p>name：{{user.name}}</p>
                <p>====================</p>
                <h3>单向绑定数据</h3>
                <input type="text" :value="user.name" />
                <p>====================</p>
                <h3>双向绑定数据</h3>
                <input type="text" v-model:value="user.name" />
                <h3>循环绑定数据</h3>
                <select>
                    <option v-for="(city,index) in cities" :value="city.cityId">{{city.cityName}}</option>
                </select>
                <table>
                    <thead>
                        <th>cityId</th>
                        <th>cityName</th>
                    </thead>
                    <tbody>
                        <tr v-for="(city,index) in cities">
                            <td>{{city.cityId}}</td>
                            <td>{{city.cityName}}</td>
                        </tr>
                    </tbody>
                </table>
                <p>====================</p>
                <h3>绑定事件</h3>
                <button type="button" @click="test_1">test_1</button>
                <button id="test_2" price="22.33" @click="test_2($event)">test_2</button>
                <p>====================</p>
                <h3>自定义模板</h3>
                <button-demo></button-demo>
                <button-count></button-count>
            </div>
        </div>
    </div>
</div>
</div>


<!-- /page content -->
<script>
    $(function () {
        alert("这是初始化函数")
        test_1()
    });
    Vue.component("button-demo", {
        template: "<el-button>button-demo</el-button>"
    });

    Vue.component("button-count", {
        data: function () {
            return {
                count: 0,
            };
        },
        methods: {
            count_fun: function () {
                this.count += 1;
            },
        },
        template: "<button @click ='count_fun()'>{{count}}</button>",
    });

    var myvue = new Vue({
        el: '#myVue',
        data: {
            user: {
                name: "liuxing",
                age: 18,
                gender: "male"
            },
            cities: [{
                    cityId: 1,
                    cityName: "chngqing"
                },
                {
                    cityId: 2,
                    cityName: "chengdu"
                }
            ]
        },
        created() {
            window.test_1 = this.test_1;
        },
        mounted() {
            this.initCities();
        },
        methods: {
            test_1() {
                console.log(this.user);
            },
            test_2(event) {
                console.log(event);
                console.log(event.originalTarget);
                console.log(event.originalTarget.attributes.getNamedItem("price").name);
                console.log(event.originalTarget.attributes.getNamedItem("price").value);
            },
            initCities() {
                var countryId = 522;
                var self = this;
                $.ajax({
                    url: "/api/cites/" + countryId,
                    success: function (data) {
                        //遍历数据               
                        self.cities = data;
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }
        }
    });
</script>